<template>
  <div class="main-card">
    <div class="simple-info">
      <!--文章头部信息-->
      <div class="simple-article-head">
        <span>{{ articleInfo.author }}</span>
        <span class="grey-borderLR">{{ articleInfo.updatedTime }}</span>
        <span>{{ articleInfo.clazz }} - {{ articleInfo.label }}</span>
      </div>

      <!--内容预览-->
      <div class="article-pre-info">
        <div class="article-pre-title">{{ articleInfo.title }}</div>
        <div class="article-pre-content">
          {{ articleInfo.summary }}
        </div>
      </div>

      <!--文章元数据-->
      <div class="simple-article-tail">
        <span><View class="little-icon"/>{{ articleInfo.view }}</span>
        <span class="grey-borderLR"><icon-font icon-name="icon-dianzan" class="little-icon"/>{{ articleInfo.like }}</span>
        <span><icon-font icon-name="icon-caozuo-pinglun" class="little-icon"/>{{ articleInfo.comment }}</span>
      </div>
    </div>
    <img v-if="articleInfo.cover !==undefined" class="article-cover"
         :src="Resources.StaticFile(articleInfo.cover)"
         alt="文章封面"/>
  </div>
</template>

<script setup lang="ts">
import {ArticleInfo} from "@/entity/article/article";
import {Resources} from "@/utils/static";

interface Props {
  articleInfo: ArticleInfo;
}

// eslint-disable-next-line no-undef
const props = defineProps<Props>();
// eslint-disable-next-line vue/no-setup-props-destructure
const articleInfo = props.articleInfo;

</script>

<style scoped>
.simple-info {
  width: 75%;
}

.little-icon {
  width: 20px;
  height: 12px;
  margin-right: 5px;
}

.main-card {
  width: 100%;
  min-width: 200px;
  display: flex;
  padding: 25px;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  background: white;
  border-bottom: 0.5px solid rgb(229, 230, 235);
}

.simple-article-head {
  margin: 0 0 8px 0;
  color: #4e5969;
}

.article-pre-info {
  margin: 10px 0;
  width: 100%;
}

.article-pre-title {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 0;
}

.article-pre-content {
  width: 100%;
  color: #909090;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.article-cover {
  width: 20%;
  height: 70%;
  margin: 3px;
}

.grey-borderLR {
  border-left: 2px solid rgb(229, 230, 235);
  border-right: 2px solid rgb(229, 230, 235);
  padding: 0 5px;
  margin: 0 5px;
}

.simple-article-tail {
  display: flex;
}

</style>